<template>
	<div style="border: 1px solid black;width: 90%;margin: 0 auto;">
		<p class="ys">上传头像</p>
		<div>
			<el-upload
			    class="avatar-uploader"
			    action="https://jsonplaceholder.typicode.com/posts/"
			    :show-file-list="false"
			    :on-success="handleAvatarSuccess"
			    :before-upload="beforeAvatarUpload"
			  >
			    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
			    <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
				<aside>上传图片</aside>
			  </el-upload>
		</div>
		<p class="ys">修改密码</p>
		<p class="ys">修改名称 电话</p>
	</div>
</template>

<script>
import { ref } from 'vue'

import { Plus } from '@element-plus/icons-vue'
import { ElMessage } 
from 'element-plus'
export default{
	name:'Personal',
	components: {
	    Plus,
	  },
	  data() {
	    return {
	      imageUrl: '',
	    }
	  },
	  methods: {
	    handleAvatarSuccess(res, file) {
	      this.imageUrl = URL.createObjectURL(file.raw)
	    },
	    beforeAvatarUpload(file) {
	      const isJPG = file.type === 'image/jpeg'
	      const isLt2M = file.size / 1024 / 1024 < 2
	
	      if (!isJPG) {
	        this.$message.error('Avatar picture must be JPG format!')
	      }
	      if (!isLt2M) {
	        this.$message.error('Avatar picture size can not exceed 2MB!')
	      }
	      return isJPG && isLt2M
	    },
	  },
}
</script>

<style scoped>
.ys{
	border-left: 3px solid #67c23a;
	line-height: 70px;
	text-indent: 1.5em;
	background-color: #ebeef5;
	color: #888888;
	font-size: 16px;
	font-weight: bold;
}
/* 上传图片 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 74px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
